import {imgRoutes} from "./imgroutes.js";
import {store1} from "../store.js";
import {Router} from "../routesystem.js";
import {EventBus} from "../eventbus.js";
import {goodRoutes} from "./goods.js";
import {routes} from "../routes.js";

export var name = "+layout";

export function Render(){//返回html的

    return `
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body,html{
          width: 100%;
          height: 100%;
        }
        .bottomNav{
          width: 100%;
          height: 6%;
          background-color: rgb(2, 103, 52);
          position: fixed;
          bottom: 0;
          left: 0;
        }
        .bottomNav ul {
            display: flex;
            width: 100%;
            height: 100%;
        }
        .bottomNav ul li {
            width: 25%;
            height: 100%;
            text-align: center;
            padding-top: 0.63rem;
        }
        .bottomNav ul li  img {
            height: 50%;
        }
        .bottomNav ul li p{
            font-size: 1.8rem;
            color: #fff;
        }
        .content{
            height: 94%;
            padding: 0;
        }
</style>
<!--   用于显示每页的内容-->
   <div class="content">
</div>
<!--   用于显示底部的固定导航-->
   <div class="bottomNav" style="display: block"></div>
   
    `
}

export function afterRender() {
    //此处为动态添加底部导航内容
    let ul = document.createElement("ul");
    let html = ``;
    imgRoutes.forEach(function(obj){
        html += `
              <li>
                <img>
                <p>${obj.name}</p>
              </li>
        `
    })
    let bottomNav = document.querySelector(".bottomNav");
    ul.innerHTML = html;
    bottomNav.appendChild(ul);

    //此处为底部导航图片点击事件并修改图片的src
    let lis = document.querySelectorAll(".bottomNav ul li");
    let imgs = document.querySelectorAll(".bottomNav ul li img");
    //初始化
    imgs.forEach(function(img,index){
        img.src = imgRoutes[index].src1;
        imgs[0].src = imgRoutes[0].src2;
    })

    lis.forEach(function(li,index){
        li.addEventListener("touchend",function(){

            //排他
            imgs.forEach(function (item,i){
                item.src = imgRoutes[i].src1;
            })

            //给被点击的图片修改路径
            imgs[index].src = imgRoutes[index].src2;
            console.log(12)
            //根据被点击的图片改变对应hash值
            location.hash = imgRoutes[index].path;
        })
    })



    //根据hash值改变渲染对应内容
    let content = document.querySelector(".content");

    function loadEvent() {
                (async function () {
                    let url = location.hash.slice(1) || store1.state.activeMenu; //  #/home  ----> /home
                    console.log(url)
                    /*================保证页面刷新的时候 根据当前hash值显示对应的底部导航=========================*/
                    for (let i = 0; i < imgRoutes.length; i++) {
                        if(url === imgRoutes[i].path) {
                            //排他
                            imgs.forEach(function (item,index){
                                item.src = imgRoutes[index].src1;
                            })
                            imgs[i].src = imgRoutes[i].src2;
                        }
                    }

                    /*=========================进行页面渲染===================*/
                    let loader = Router.routes[url];  //loader | undefined



                    if (loader) {

                        let module = await loader();  //懒加载核心位置

                        if (module && module.Render) {

                            let html = module.Render();  //页面立即渲染  组件立即加载
                            if (html) {
                                console.log(">>>>>-------")
                                content.innerHTML = html;

                                if (module.afterRender) {
                                    module.afterRender();
                                }
                            }
                        } else {
                            content.innerHTML = "<h1>组件加载失败</h1>"
                        }
                    } else {
                        EventBus.emit("route:404", "<h1>404 Not Found</h1>");
                    }
                })();
    }

    loadEvent();
    window.addEventListener("hashchange", loadEvent );
}